<template>
  <el-table :data="rolelist" border style="width: 100%" >
    <el-table-column prop="uid" label="角色编号"                             ></el-table-column>
    <el-table-column prop="username" label="角色名称"  > </el-table-column>
    <el-table-column prop="rolename" label="所属角色"  > </el-table-column>
    <el-table-column prop="status" label="状态" >
        <template slot-scope="scope" >
            <el-tag type="primary" v-if="scope.row.status==1">启用</el-tag>
            <el-tag type="danger" v-else>禁用</el-tag>
        </template>
         </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" 
        type="primary"
        @click="edit(scope.row.uid)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="del(scope.row.uid)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import {delUser,userList} from "../../util/axios"
export default {
  data() {
    return {
      rolelist: [],
      page:1
    };
  },
  mounted(){
      //拿到数据进行渲染
     this.pageList();
  },
  methods:{
    //编辑功能
     edit(uid){
        this.$emit("edit",uid);
     },
     //删除功能
     del(uid){
         this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           delUser({uid}).then(res=>{
             if(res.code == 200){ 
               this.$message.success(res.msg); 
               this.$emit("rolads")
             }else{
               this.$message.error(res.msg)
             }
            
           })
        }).catch(() => {
          this.$message.info("已取消删除")       
        });
    } ,
    pageList(){
          userList({size:2,page:this.page}).then(res=>{
          if(res.code==200){
            this.rolelist = res.list ?res.list:[];
               if(this.page>1&&this.rolelist.length==0){
                  this.page--;
                  this.pageList();
                  return
               }
               this.rolelist = res.list  
          }else{
              this.$message.error(res.msg)
          }
        
      })
    },
    //分页点击的时候改页面数据
    search(e){
        this.page = e;
        this.pageList();
    }
 
    }
  };
</script>

<style lang="stylus" scoped>

</style>